<template>
  <view v-if="shenheStatus == 0" class="d_box">
    <view class="card_box">
      <image :src="detail.pic_url" class="box_avater"></image>
      <view style="font-size: 34rpx; margin: 30rpx; font-weight: 500">{{
        $t('writeOff.card')
      }}</view>
      <view style="font-size: 58rpx; margin: 30rpx; font-weight: bold">{{
        detail.verify_card_name
      }}</view>
      <view style="font-size: 34rpx; margin: 30rpx; font-weight: 500">{{
        $t('writeOff.rules')
      }}</view>
      <view
        class="card_btn"
        @click="
          $utils.toUrl(
            `/user/write_off_card/write_off_code?id=${detail.id}&name=${detail.verify_card_name}&pic=${detail.pic_url}`
          )
        "
        >{{ $t('writeOff.toCancle') }}</view
      >
      <!-- <view style="font-size: 28rpx;margin: 30rpx;color: #E5292D;">明天即将过期</view> -->
      <view class="card_info_box">
        <view class="info_inline">
          <text>{{ $t('coupon.validity') }}</text>
          <text style="float: right"
            >{{ detail.sale_time | filterDate }} /
            {{ detail.end_time | filterDate }}</text
          >
        </view>
        <view class="info_inline">
          <text>{{ $t('writeOff.count') }}</text>
          <text style="float: right">{{ detail.use_num }}</text>
        </view>
        <view class="info_inline">
          <text>{{ $t('writeOff.reduce') }}</text>
          <text style="float: right">{{ detail.left_num }}</text>
        </view>
      </view>
      <u-cell-group>
        <u-cell-item
          :title="$t('writeOff.toCancle')"
          @click="$utils.toUrl('/user/write_off_card/write_off_code')"
        ></u-cell-item>
        <u-cell-item
          :title="$t('writeOff.records')"
          @click="
            $utils.toUrl(
              '/user/write_off_card/write_off_record?id=' + detail.id
            )
          "
        ></u-cell-item>
      </u-cell-group>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      detail: {},
    };
  },
  onLoad(opt) {
    uni.setNavigationBarTitle({
      title: this.$t('title.writeOffDetail'),
    });
    this.getDetailById(opt.id);
  },
  filters: {
    filterDate(times) {
      if (!times) return;
      const date = new Date(times * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? '0' + m : m;
      let d = date.getDate();
      d = d < 10 ? '0' + d : d;
      return `${y}-${m}-${d}`;
    },
  },
  methods: {
    async getDetailById(id) {
      try {
        const res = await this.$allrequest.coupon.verifyDetail({
          sale_id: id,
        });
        if (res.code == 0) {
          this.detail = res.data.list;
        } else {
          this.$utils.toast(res.msg);
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.info_inline {
  padding: 0 20rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: left;
}
.card_info_box {
  padding: 20rpx 0;
  border-top: 1px dashed #ccc;
  color: rgba(127, 127, 127, 1);
}
.card_btn {
  margin: 20rpx auto;
  margin-top: 40rpx;
  background: #00a0e9;
  color: #fff;
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
}
.box_avater {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.05);
  left: 50%;
  transform: translate(-50%, -50%);
  top: 0;
}
.card_box {
  text-align: center;
  position: relative;
  background-color: #fff;
  border-radius: 10rpx;
  width: 100%;
  margin-top: 60rpx;
  padding: 30rpx;
  padding-top: 50rpx;
}
.d_box {
  height: 100vh;
  background-color: rgb(0, 160, 233);
  padding: 30rpx;
}
</style>
